<template>
    <div class="breadcrumb_container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>个人信息</el-breadcrumb-item>
            <!-- <el-breadcrumb-item>用户列表</el-breadcrumb-item> -->
        </el-breadcrumb>
        <!-- <h3>仍待完善的功能：用el-description学生基本信息展示</h3> -->
        <el-descriptions title="" direction="vertical" :column="4" border style="top:20px">
            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
            <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
            <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
            <el-descriptions-item label="备注">
                <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
        </el-descriptions>
        <!-- <h2>我是Mine组件</h2> -->
        <!-- <div class="tableMain">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="id" label="ID" width="">
                </el-table-column>
                <el-table-column prop="name" label="用户名" width="">
                </el-table-column>
                <el-table-column prop="date" label="日期" width="">
                </el-table-column>
                <el-table-column prop="address" label="地址" width="">
                </el-table-column>
            </el-table>
            <div class="addArea">
                <el-button class="add_btn" type="primary" @click="add">新增</el-button>
            </div>
            <el-dialog style="width: 100%;height: 1000px;" title="用户信息" :visible.sync="zdydialog" :show-close="false">
                <el-form :model="form">
                    <el-form-item label="编号" width="80px">
                        <el-input class="dialog_input" v-model="form.id"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" width="80px">
                        <el-input class="dialog_input" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="日期" width="80px">
                        <el-date-picker v-model="form.date" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="地址" width="80px">
                        <el-select class="dialog_input" v-model="form.address" placeholder="选择地址">
                            <el-option label="猫窝" value="猫窝"></el-option>
                            <el-option label="狗窝" value="狗窝"></el-option>
                            <el-option label="鼠窝" value="鼠窝"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submit">确 定</el-button>
                    <el-button @click="zdydialog = false">取 消</el-button>
                </div>
            </el-dialog>
        </div> -->

    </div>

</template>

<script>
export default {
    name: 'Mine',
    // data() {
    //     return {
    //         zdydialog: false,
    //         form: {},
    //         loading: true,
    //         tableData: [{
    //             id: '1001',
    //             name: 'Tom',
    //             date: '2019-11-26',
    //             address: '猫窝',
    //         }, {
    //             id: '1002',
    //             name: 'Jerry',
    //             date: '2019-11-26',
    //             address: '鼠洞',
    //         }, {
    //             id: '1003',
    //             name: 'Spike',
    //             date: '2019-11-26',
    //             address: '狗窝',
    //         },],
    //     }
    // },
    // methods: {
    //     add() {
    //         this.form = {
    //             id: '',
    //             name: '',
    //             date: '',
    //             address: ''
    //         }
    //         this.zdydialog = true
    //     },
    //     submit() {
    //         // this.form.date = reformat(this.form.date); //日期类型转换
    //         this.tableData.push(this.form) //向tableData中添加数据
    //         this.zdydialog = false	//自定义对话框隐藏
    //     }
    // }

}
</script>

<style scoped>
.breadcrumb_container {
    top: 20px;
}
</style>